<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<meta name="format-detection" content="telephone=no">
	<title>首页</title>
	<link rel="stylesheet" href="http://xhh.wasd1.cn/static/css/base.css">
	<link rel="stylesheet" href="../css/icon.css">
	<link rel="stylesheet" href="../css/swiper.min.css">
	<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div id="home" class="flexv wrap">
	<div class="flexitemv box">
		<div class="flex center head">
			<a href="javascript:;" class="bls bls-zjt"></a>
			<h1 class="flexitem center">首页</h1>
			<a href="javascript:;" class="bls bls-dian"></a>
		</div>
		<div class="flex nav">
			<a href="javascript:;" class="flexitem center item current"><span class="flex center">最新资讯</span></a>
			<a href="javascript:;" class="flexitem center item"><span class="flex center">事业资讯</span></a>
			<a href="javascript:;" class="flexitem center item"><span class="flex center">产品资讯</span></a>
			<a href="javascript:;" class="flexitem center item"><span class="flex center">直销资讯</span></a>
			<a href="javascript:;" class="flex center bls bls-yjt more"></a>
		</div>
		<div class="flexitemv mainbox">
			<div class="flex banner">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><img class="fitimg" src="../image/banner.jpg"/></div>
						<div class="swiper-slide"><img class="fitimg" src="../image/banner.jpg"/></div>
						<div class="swiper-slide"><img class="fitimg" src="../image/banner.jpg"/></div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>
			<div class="flex center search">
				<div class="flex centerv home-sea">
					<input type="text" class="flexitem sea-text" placeholder="输入关键字，找文章">
					<i class="flex smtxt"></i>
					<span class="flex center bls bls-fdj submit"></span>
				</div>
			</div>
			<div class="listbox">
				<div class="flex lists">
					<div class="img">
						<img class="fitimg" src="../image/banner.jpg"/>
					</div>
					<div class="flexitemv cont">
						<a href="javascript:;" class="flexitemv">特斯拉创始人发表了15页的论文来描绘人类将如何殖民火星</a>
						<div class="base">
							<span><em>7862</em>阅读</span>
							<span><em>7862</em>分享</span>
							<span>于建华</span>
							<span>首创</span>
						</div>
					</div>
				</div>
				<div class="flex lists">
					<div class="img">
						<img class="fitimg" src="../image/banner.jpg"/>
					</div>
					<div class="flexitemv cont">
						<a href="javascript:;" class="flexitemv">特斯拉创始人发表了15页的论文来描绘人类将如何殖民火星</a>
						<div class="base">
							<span><em>7862</em>阅读</span>
							<span><em>7862</em>分享</span>
							<span>于建华</span>
							<span>首创</span>
						</div>
					</div>
				</div>
				<div class="flex lists">
					<div class="img">
						<img class="fitimg" src="../image/banner.jpg"/>
					</div>
					<div class="flexitemv cont">
						<a href="javascript:;" class="flexitemv">特斯拉创始人发表了15页的论文来描绘人类将如何殖民火星</a>
						<div class="base">
							<span><em>7862</em>阅读</span>
							<span><em>7862</em>分享</span>
							<span>于建华</span>
							<span>首创</span>
						</div>
					</div>
				</div>
				<div class="flex lists">
					<div class="img">
						<img class="fitimg" src="../image/banner.jpg"/>
					</div>
					<div class="flexitemv cont">
						<a href="javascript:;" class="flexitemv">特斯拉创始人发表了15页的论文来描绘人类将如何殖民火星</a>
						<div class="base">
							<span><em>7862</em>阅读</span>
							<span><em>7862</em>分享</span>
							<span>于建华</span>
							<span>首创</span>
						</div>
					</div>
				</div>
				<div class="flex lists">
					<div class="img">
						<img class="fitimg" src="../image/banner.jpg"/>
					</div>
					<div class="flexitemv cont">
						<a href="javascript:;" class="flexitemv">特斯拉创始人发表了15页的论文来描绘人类将如何殖民火星</a>
						<div class="base">
							<span><em>7862</em>阅读</span>
							<span><em>7862</em>分享</span>
							<span>于建华</span>
							<span>首创</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="flex tabbars">
		<div class="flexitem center middle">
			<a href="javascript:;" class="flexv center user">
				<span class="flex userimg">
					<img class="fitimg" src="../image/banner.jpg"/>
				</span>
				<em class="flex center">首页</em>
			</a>
		</div>
		<a href="javascript:;" class="flexv center item">
			<i class="flex center bls bls-fkjl fk"></i>
			<em class="flex center">访客记录</em>
		</a>
		<a href="javascript:;" class="flexv center item">
			<i class="flex center bls bls-zfkt"></i>
			<em class="flex center">支付开通</em>
		</a>
		<a href="javascript:;" id="data" class="flexv center item">
			<i class="flex center bls bls-grzx"></i>
			<em class="flex center">个人中心</em>
		</a>
	</div>
	<!--提示-->
	<form class="flex center alert">
		<div class="mask"></div>
		<div class='content'>
			<i class="flex center bls bls-cuo cuo"></i>
			<h3 class="flex center title">您的信息不完整</h3>
			<p class="flex center tis">立刻完善资料，让客户找到您</p>
			<div class="flex center input">
				<span class="flex centerv">姓名</span>
				<input type="text" class="flexitem" placeholder="轩轩">
			</div>
			<div class="flex center input">
				<span class="flex centerv">手机号</span>
				<input type="text" class="flexitem" placeholder="138****3561">
			</div>
			<div class="flex centerv input brands">
				<span class="flex centerv">品牌</span>
				<input type="text" readonly="readonly" class="flexitem cenk" placeholder="安发国际">
				<i class="flex smtxt"></i>
				<i class="flex center bls bls-xia brand"></i>
			</div>
			<a href="javascript:;" class="flex center button">保存修改</a>
		</div>
	</form>
	<!--品牌-->
	<div id="brand" class="flexv dialog_box">
		<div class="flex center head">
			<a href="javascript:;" class="bls bls-zjt"></a>
			<h1 class="flexitem center" style="margin-left: -2rem;">选择品牌</h1>
		</div>
		<ul class="flexitemv mainbox company" style="padding-top: 20px">
		
		</ul>
		<ul class="lettrt">
			<li><a href="#">#</a></li>
			<li><a href="#A">A</a></li>
			<li><a href="#B">B</a></li>
			<li><a href="#C">C</a></li>
			<li><a href="#D">D</a></li>
			<li><a href="#E">E</a></li>
			<li><a href="#F">F</a></li>
			<li><a href="#G">G</a></li>
			<li><a href="#H">H</a></li>
			<li><a href="#I">I</a></li>
			<li><a href="#J">J</a></li>
			<li><a href="#K">K</a></li>
			<li><a href="#L">L</a></li>
			<li><a href="#M">M</a></li>
			<li><a href="#N">N</a></li>
			<li><a href="#O">O</a></li>
			<li><a href="#P">P</a></li>
			<li><a href="#Q">Q</a></li>
			<li><a href="#R">R</a></li>
			<li><a href="#S">S</a></li>
			<li><a href="#T">T</a></li>
			<li><a href="#U">U</a></li>
			<li><a href="#V">V</a></li>
			<li><a href="#W">W</a></li>
			<li><a href="#X">X</a></li>
			<li><a href="#Y">Y</a></li>
			<li><a href="#Z">Z</a></li>
		</ul>
	</div>
	
</div>
</body>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>
<script type="text/javascript">
    var mySwiper = new Swiper ('.swiper-container', {
        loop: true,
        autoplay:1500,
        pagination: '.swiper-pagination',
        autoplayDisableOnInteraction:false
    });
// 	显示
	$("#data").click(function(){
	    $(".alert").css({"display":"block"});
        $(".alert").find(".content").addClass('trans');
	});
//	关闭
	$(".cuo").click(function(){
        $(".alert").css({"display":"none"});
	});

//  品牌
	var brands = [
		{id: 1, title: '安利', pinyin: 'anli'},
		{id: 1, title: '安惠', pinyin: 'anhui'},
		{id: 1, title: '嘉康利', pinyin: 'jiakangli'},
		{id: 1, title: '完美', pinyin: 'wanmei'}
	];
	var char = '', charlist = [];
	var charTpl = [], listTpl = [];
	for (var k = 0; k < brands.length; k++) {
		var ch = brands[k].pinyin.substring(0, 1);
		if (char == ch) {
			charlist[char].push(brands[k]);
			listTpl.push('<div>' + brands[k].title + '</div>');
		} else {
			if (char != '') listTpl.push('</li>');
			char = ch;
			charlist[char] = [brands[k]];
			listTpl.push('<li id="' + char.toUpperCase() + '">');
			listTpl.push('<p>' + char.toUpperCase() + '</p>');
			listTpl.push('<div>' + brands[k].title + '</div>');
			charTpl.push('<li><a href="#' + char + '">' + char.toUpperCase() + '</a></li>');
		}
	}
	listTpl.push('</li>');
	//console.log(listTpl.join(''));
	//console.log(charTpl.join(''))
	
   $(".company").append(listTpl.join(''));
//   选择
    $(".brand").click(function () {
        $("#brand").addClass('show');
        $("#brand ul li div").click(function () {
            $(".cenk").val($(this).text());
            $("#brand").removeClass('show');
        });
        $('#brand .bls').click(function () {
            $("#brand").removeClass('show');
        })
    })
	
	
</script>
</html>